<template>
  <li>
    <div class="select">
      <input
        type="checkbox"
        :checked="good.select"
        @click="good.select = !good.select"
      />
    </div>
    <div class="pic">
      <img :src="good.pic" alt="" />
    </div>
    <div class="name">{{ good.name }}</div>
    <div class="price">
      ￥ <span>{{ good.price }}</span>
    </div>
    <div class="number">
      <!-- 处理边界 -->
      <button :disabled="good.buy_num <= 0" @click="good.buy_num--">-</button>
      <input type="text" v-model="good.buy_num" />
      <button :disabled="good.buy_num >= good.number" @click="good.buy_num++">
        +
      </button>
    </div>
    <div class="subtotal">
      ￥ <span>{{ good.price * good.buy_num }}</span>
    </div>
    <div class="del">
      <transition
      name="animate__animated animate__heartBeat "
      appear
      enter-active-class="animate__rubberBand "
      
      >
        <button @click="delGood(good.id)">删除</button>
      </transition>
     
    </div>
  </li>
</template>

<script>
import "animate.css";
export default {
  name: "CartItem",
  props: ["good"],
  methods: {
    //自己不能删除，这个组件里面拿到的只是单个的对象，去数据的源头去做修改
    delGood(id) {
      //在bus上放了一个delOneGood的自定义事件，传了你要删除的id过去
      if (confirm("确定删除该商品吗，亲亲")) this.$bus.$emit("delOneGood", id);
    },
  },
};
</script>

<style>
li {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #333;
  box-sizing: border-box;
  margin: 10px 0;
  border-radius: 10px;
}
li > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 20px;
}
li > div > span {
  color: red;
}
li > div:first-child > input {
  width: 20px;
  height: 20px;
}
li > div > button {
  font-size: 20px;
  padding: 5px 10px;
  cursor: pointer;
}
li > div.del > button {
  background-color: red;
  color: #fff;
}
li > div.number > input {
  width: 50px;
  height: 24px;
  font-size: 20px;
  text-align: center;
}
.select,
.pic,
.del {
  width: 100px;
}

.name,
.price,
.subtotal {
  width: 200px;
}

.number {
  width: 300px;
}
</style>
